<template>
	<view style="height: 100vh; background-color: #FFFFFF;">
		<u-navbar title-color="#FFFFFF" height="48" back-icon-color="#FFFFFF" :border-bottom="false" :is-fixed="true"
			:title="'火情信息详情'"></u-navbar>
		<uc-content :loading="loading">
			<uni-grid :column="3" :highlight="true" @change="change">
				<uni-grid-item v-if="fireInfo.sprayPumpSwitch">
					<view class="grid-item-box" style="background-color: #fff;">
						<uni-icons v-if="fireInfo.sprayPumpSwitch === '10'" type="checkbox-filled" :size="30" color="#67c23a" />
						<uni-icons v-else type="clear" :size="30" />
						<text class="text">喷淋泵低压压力开关</text>
						
					</view>
				</uni-grid-item>
				<uni-grid-item v-if="fireInfo.sprayPump">
					<view class="grid-item-box" style="background-color: #fff;">
						<uni-icons v-if="fireInfo.sprayPump === '10'" type="checkbox-filled" :size="30" color="#67c23a" />
						<uni-icons v-else type="clear" :size="30" />
						<text class="text">喷淋泵</text>
						<text class="text">{{ fireInfo.firePumpValue ? '当前压力值' + fireInfo.firePumpValue + 'Mpa' : '' }}</text>
					</view>
				</uni-grid-item>
				<uni-grid-item v-if="fireInfo.firePumpSwitch">
					<view class="grid-item-box" style="background-color: #fff;">
						<uni-icons v-if="fireInfo.firePumpSwitch === '10'" type="checkbox-filled" :size="30" color="#67c23a" />
						<uni-icons v-else type="clear" :size="30" />
						<text class="text">消火栓泵压力开关</text>
					</view>
				</uni-grid-item>
				<uni-grid-item v-if="fireInfo.firePump">
					<view class="grid-item-box" style="background-color: #fff;">
						<uni-icons v-if="fireInfo.firePump === '10'" type="checkbox-filled" :size="30" color="#67c23a" />
						<uni-icons v-else type="clear" :size="30" />
						<text class="text">消火栓泵</text>
						<text class="text">{{ fireInfo.sprayPumpValue ? '当前压力值' + fireInfo.sprayPumpValue + 'Mpa' : '' }}</text>
					</view>
				</uni-grid-item>
				<uni-grid-item v-if="fireInfo.fumeExtractor">
					<view class="grid-item-box" style="background-color: #fff;">
						<uni-icons v-if="fireInfo.fumeExtractor === '10'" type="checkbox-filled" :size="30" color="#67c23a" />
						<uni-icons v-else type="clear" :size="30" />
						<text class="text">排烟机</text>
						<text class="text">{{ fireInfo.windSpeed ? '风速' + fireInfo.windSpeed + 'm/s' : '' }}</text>
					</view>
				</uni-grid-item>
				<uni-grid-item v-if="fireInfo.forcedDraftFan">
					<view class="grid-item-box" style="background-color: #fff;">
						<uni-icons v-if="fireInfo.forcedDraftFan === '10'" type="checkbox-filled" :size="30" color="#67c23a" />
						<uni-icons v-else type="clear" :size="30" />
						<text class="text">送风机</text>
						<text class="text">{{ fireInfo.windSpeed ? '风速' + fireInfo.windSpeed + 'm/s' : '' }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
			<view class="list-item">
				<view class="list-bottom">
					<view>上报人:</view>
					<view>{{fireInfo.userName}}</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-bottom">
					<view>上报人电话:</view>
					<view>{{fireInfo.userPhone}}</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-bottom">
					<view>火情名称:</view>
					<view>{{fireInfo.name}}</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-bottom">
					<view>所属企业:</view>
					<view>{{fireInfo.enterpriseName}}</view>
				</view>
			</view>
			<view class="list-item" v-if="this.fireInfo.fireAlarmName!=null">
				<view class="list-bottom">
					<view>预警名称:</view>
					<view>{{fireInfo.fireAlarmName}}</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-bottom">
					<view>所属建筑:</view>
					<view>{{fireInfo.buildName}}</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-bottom">
					<view>详细地址:</view>
					<view>{{fireInfo.loaction}}</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-bottom">
					<view>火情确认时间:</view>
					<view>{{fireInfo.fireConfirmTime|dateFormat}}</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-bottom">
					<view>火情状态:</view>
					<view>{{fireInfo.fireExecutionStatus|fireStatus}}</view>
				</view>
			</view>
			<view class="u-m-20 u-text-center">
				<h5>着火位置地图</h5>
				<baidu-map class="map-view" map-type="BMAP_NORMAL_MAP"  :center="{lng: fireInfo.userLongitude, lat: fireInfo.userLatitude}" :zoom="15" :scroll-wheel-zoom="true">
				    <bm-marker :position="{lng: fireInfo.userLongitude, lat: fireInfo.userLatitude}" :dragging="false" animation="BMAP_ANIMATION_BOUNCE">
				        <bm-label :content="'第一报警人'+fireInfo.userName" :labelStyle="{color: 'red', fontSize : '12px'}" :offset="{width: 0, height: 30}"/>
				    </bm-marker>
				</baidu-map>
			</view>
			<view style="width: 80%;margin: 10rpx auto;" v-if="hiddenButton">
				<u-row gutter="16">
					<u-col span="6" v-if="fireInfo.fireExecutionStatus!=2&&fireInfo.fireUserId!=userId&&hiddenGLYButton">
						<u-button size="medium" style="width: 100%;" class="u-m-t-20" @click="actionSheetTap()" type="primary" >开始导航</u-button>
					</u-col>
					<u-col span="6" v-if="fireInfo.fireExecutionStatus!=2&&fireInfo.fireUserId!=userId">
						<u-button size="medium" style="width: 100%;" class="u-m-t-20"  @click="fireAlarm()" type="primary" >视频通话</u-button>
					</u-col>
					<u-col span="6" v-if="fireInfo.fireExecutionStatus!=2">
						<u-button size="medium" style="width: 100%;" class="u-m-t-20"  @click="show=true" type="success" >结束火情</u-button>
					</u-col>
					<u-col span="6"  v-if="fireInfo.inspectionVideo!=null" >
						<u-button size="medium" style="width: 100%;" class="u-m-t-20" type="primary" @click="lookInspectionViedo">勘察视频</u-button>
					</u-col>
					<u-col span="6"  v-if="fireInfo.fireVodie">
						<u-button size="medium" style="width: 100%;" class="u-m-t-20" type="primary" @click="lookFireViedo">火情视频</u-button>
					</u-col>
				</u-row>	
			</view>
			<view class="u-m-t-20" v-if="hiddenButton">
				<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="change"></u-tabs>
				<view>
					<view v-if="personList.length<1" style="margin-top: 20rpx;">
						<u-empty  text="人员反馈数据为空" mode="list"></u-empty>
					</view>
					<view v-else>
						<view class="list-item" v-for="(item,index) in personList" :key="index" @click="telItem(item)">
							<view class="list-top">
								<view class="list-left">姓名:{{ item.userName }}</view>
							</view>
							<view class="list-center u-line-4">
								<view>电话:{{ item.phone}}</view>
								<view>状态：{{item.feedbackStatus==0?'未反馈':'已反馈'}}</view>
								<view v-if="item.feedbackStatus==1">反馈是否超时:{{ item.lock?"是":"否  "}}</view>
								<view>点击拨打电话</view>
							</view>
							<view class="list-bottom"></view>
						</view>
					</view>
				</view>
			</view>
		</uc-content>
		<u-modal v-model="show" :content="content" :show-cancel-button="true" @cancel="show=false"  @confirm="confirm">
		</u-modal>
		<u-popup v-model="show1" mode="center" width="700rpx" height="450rpx">
			<view>
				<video :src="fireInfo.inspectionVideo"  controls="controls" :autoplay="true" style="width: 100%;height: 450rpx;"></video>
			</view>
		</u-popup>
		<u-popup v-model="show2" mode="center" width="700rpx" height="450rpx">
			<video :src="fireInfo.fireVodie"  controls="controls" :autoplay="true" style="width: 100%;height: 450rpx;"></video>
		</u-popup>
	</view>
</template>

<script>
	import utils from "../../../utils/utils.js"
	export default {
		data() {
			return {
				show: false,
				show1:false,
				show2:false,
				fireInfo: [],
				loading: false,
				ucId: '',
				content: "如火情未扑灭，恶意结束火情信息将承担相应法律责任",
				current:0,
				tabList:[
					{
						name: '未反馈'
					},{
						name: '已反馈'	
					}
				],
				personList:[],
				buttonRect: {}
				
			}
		},
		computed:{
			hiddenButton(){
				let roleCode = this.$store.getters.roleCode;
				return roleCode=="XFZD-ADMIN"||roleCode=="XT-ADMIN"||roleCode=="ZD-ADMIN"||roleCode=="DD-ADMIN"||roleCode=="JW-ADMIN"||roleCode=="XZ-ADMIN"||roleCode=="XZ-YH"||"DD-YH"
			},
			hiddenGLYButton(){
				let roleCode = this.$store.getters.roleCode;
				return roleCode=="XFZD-ADMIN"||roleCode=="ZD-ADMIN"||roleCode=="DD-ADMIN"||roleCode=="JW-ADMIN"||roleCode=="XZ-ADMIN"||roleCode=="XZ-YH"||"DD-YH"
			},
			userId(){
				return this.$store.getters.userInfo.ucId;
			}
		},
		onLoad(e) {
			this.ucId = e.ucId
			console.log(1,this.$store.getters.roleCode)
		},
		onShow() {
			this.initView()
		},
		onReady() {
			this.getNodeInfo()
			window.addEventListener('resize', this.getNodeInfo)
		},
		beforeDestroy() {
			window.removeEventListener('resize', this.getNodeInfo)
		},
		methods: {
			change(index) {
				this.current = index;
				this.getPerson(this.ucId,this.current)
			},
			getNodeInfo() {
				uni.createSelectorQuery().select('.target').boundingClientRect().exec((ret) => {
					const rect = ret[0]
					if (rect) {
						this.buttonRect = rect
					}
				});
			},
			initView() {
				this.loading = true
				this.fireInfo = {}
				this.pageNum = 0
				this.getFireInfo(this.ucId)
				if(this.hiddenButton){
					this.getPerson(this.ucId,0)
				}
			},
			actionSheetTap() {
				const that = this
				uni.showActionSheet({
					title: '地图',
					itemList: ['百度地图', '高德地图', '腾讯地图'],
					popover: {
						// 104: navbar + topwindow 高度，暂时 fix createSelectorQuery 在 pc 上获取 top 不准确的 bug
						top: that.buttonRect.top + 104  + that.buttonRect.height,
						left: that.buttonRect.left + that.buttonRect.width / 2
					},
					success: (e) => {
						let mapType = ''
						if(e.tapIndex === 0){
							mapType = 'baidu'
						}
						if(e.tapIndex === 1){
							mapType = 'autonavi'
						}
						if(e.tapIndex === 2){
							mapType = 'tencent'
						}
						window.native.baiduMap({
							'mapType': mapType,
							'lat_map': that.fireInfo.userLatitude,
							'long_map': that.fireInfo.userLongitude
						})
						
					}
				})
			},
			getFireInfo(val) {
				this.utils.request("/api/app/fireInfo/getFireInfo", {
					ucId: val
				}, "post", "app", true).then(res => {
					this.fireInfo = res.data
					this.loading = false
				}).catch(error => {
					this.loading = false
					console.log(error)
				})
			},
			telItem(val){
				window.native.OpenTel(val.phone)
			},
			fireAlarm(){
				let userInfo = this.$store.getters.userInfo
				window.native.fireAlarm({
					userId:userInfo.ucId,
					channelId:this.fireInfo.fireUserId,
					disPlayName:userInfo.userName,
					token: utils.getStorageSync("authorization")
				})
			},
			confirm() {
				window.native.h5Camera()
				window.native.getUri(res=>{
					this.utils.request("/api/app/fireInfo/generateFireFinishPutFire", {
						ucId: this.ucId,
						confirmFireFile:res.uri
					}, "post", "app", true).then(res => {
						uni.navigateTo({
						    url: '/pages/index/fireInfo/list'
						});
					}).catch(error => {
						console.log(error)
					})
				})
			},
			//获取人员列表名单
			getPerson(val,type){
				this.utils.request("/api/app/fireInfo/getFireNoticeUserList", {
					fireId: val,status:type
				}, "post", "app", true).then(res => {
					this.personList = []
					this.personList = res.data
					console.log(res)
				}).catch(error => {
					console.log(error)
				})
				
			},
			lookInspectionViedo(){
				this.show1=true
			},
			lookFireViedo(){
				this.show2=true
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../../uview-ui/libs/css/style.components.scss";

	.list-item {
		padding: 20rpx 40rpx;
		background-color: #fff;
		border-bottom: #999999 1px dashed;

		.list-bottom {
			display: flex;
			margin-top: 10rpx;
			font-size: 28rpx;
			justify-content: space-between;
			color: #333;
		}

		.list-center {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #999999;
		}
	}

	content {
		padding: 24rpx;
		text-align: center;
	}
	.map-view{
		margin: 10rpx;
		width: 100%;
		height: 380rpx;
		}
		
	.image {
			width: 25px;
			height: 25px;
		}
	
		.text {
			font-size: 14px;
			margin-top: 5px;
		}
	
		.example-body {
			/* #ifndef APP-NVUE */
			// display: block;
			/* #endif */
		}
	
		.grid-dynamic-box {
			margin-bottom: 15px;
		}
	
		.grid-item-box {
			flex: 1;
			// position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
		}
	
		.grid-item-box-row {
			flex: 1;
			// position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
		}
	
		.grid-dot {
			position: absolute;
			top: 5px;
			right: 15px;
		}
	
		.swiper {
			height: 420px;
		}
</style>
